<template>
  <div id="register">
    <div class="center box1">
      <div class="left"><img src="../assets/demo3.png" alt="" /></div>
      <div
        class="right"
        style="display: flex; flex-direction: column; align-items: center"
      >
        <el-form label-width="80px" style="margin-top: 30px">
          <el-form-item label="用户名" prop="in_username">
            <el-input v-model="form.in_username"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="in_mobile">
            <el-input v-model="form.in_mail" placeholder="（选填）"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="in_mobile">
            <el-input v-model="form.in_mobile"></el-input>
          </el-form-item>
          <div style="display: flex; justify-content: space-between">
            <el-form-item label="验证码" prop="code">
              <el-input v-model="form.code"></el-input>
            </el-form-item>
            <el-button
              style="height: 40px"
              @click="identclick"
              :disabled="identification"
              >{{
                identification ? `重新发送${time}` : "获取验证码"
              }}</el-button
            >
          </div>
          <el-form-item label="密码" prop="in_userpassword">
            <el-input v-model="form.in_userpassword" type="password"></el-input>
          </el-form-item>
          <el-form-item label="确认密码">
            <el-input v-model="password" type="password"></el-input>
          </el-form-item>
          <el-checkbox v-model="checked" style="margin-left: 80px">
            <span>我同意</span></el-checkbox
          ><i
            style="cursor: pointer; color: #337ab7"
            @click="
              $router.push({
                path: 'companyProfile',
                query: { value: '4' },
              })
            "
            >《注册服务协议》</i
          >

          <el-form-item style="margin-top: 30px">
            <el-button type="primary" @click="onSubmit">免费注册</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { phone_send, registerApi } from "@/api/index";
export default {
  data() {
    return {
      checked: true,
      form: {
        in_mobile: "",
        code: "",
        in_userpassword: "",
        in_mail: "",
        in_mobile: "",
        in_username: "",
      },
      password: "",
      time: 60,
      identification: false,
    };
  },
  methods: {
    async onSubmit() {
      if (
        this.form.in_username == "" ||
        this.form.in_mobile == "" ||
        this.code == "" ||
        this.form.in_userpassword == ""
      )
        return this.$message.error("请输入账号，密码，验证码");
      if (this.form.in_userpassword !== this.password)
        return this.$message.error("输入密码不一致，请重新输入");
      this.in_mobile = this.in_mobile;
      registerApi({ ...this.form, type: "2" }).then((res) => {
        if (res.status == -1) return this.$message.error("注册失败");
        this.$router.push("/login");
      });
    },
    async identclick() {
      if (this.form.in_mobile == "")
        return this.$message.warning("请输入手机号");
      this.identification = true;
      let Time = setInterval(() => {
        if (this.time == 0) {
          this.identification = false;
          clearInterval(Time);
          this.time = 60;
        }
        this.time--;
      }, 1000);
      await phone_send({ in_mobile: this.form.in_mobile });
    },
  },
};
</script>

<style scoped lang="scss">
#register {
  background-color: #fafbff;
}
.center {
  width: 1200px;
  margin: 0 auto;
}
.box1 {
  height: 500px;
  display: flex;

  .right {
    width: 100%;
    background-color: #fff;
    border: 1px solid #edeff6;
  }
}
</style>
